<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>下拉框 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_select.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">
	<style>
		.o-select {width: auto;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>下拉框</dd>
			<dt>描述：</dt>
			<dd>表单下拉框</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>form_select.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<h4>普通下拉框</h4>
		<select class="o-select">
			<option>苹果</option>
			<option>香蕉</option>
			<option>西兰花</option>
		</select>
		<hr>
		<h4>分组下拉框</h4>
        <select class="o-select">
            <optgroup label="水果">
                <option>苹果</option>
                <option>香蕉</option>
                <option>梨</option>
                <option>葡萄</option>
                <option>西瓜</option>
            </optgroup>
            <optgroup label="蔬菜">
                <option>西兰花</option>
                <option>茄子</option>
                <option>西红柿</option>
            </optgroup>
        </select>
		<hr>
		<h4>多选下拉框<small>（按住ctrl、shift多选）</small></h4>
        <select class="o-select" size="6" multiple>
			<optgroup label="水果">
				<option>苹果</option>
				<option>香蕉</option>
				<option>梨</option>
				<option>葡萄</option>
				<option>西瓜</option>
			</optgroup>
			<optgroup label="蔬菜">
				<option>西兰花</option>
				<option>茄子</option>
				<option>西红柿</option>
			</optgroup>
		</select>
		<hr>
		<h4>禁用下拉框</h4>
		<select class="o-select" disabled>
			<option>苹果</option>
			<option>香蕉</option>
			<option>西兰花</option>
		</select>
		<select class="o-select">
			<option>苹果</option>
			<option disabled>香蕉</option>
			<option>西兰花</option>
		</select>
		<select class="o-select">
			<optgroup label="水果">
				<option>苹果</option>
				<option>香蕉</option>
				<option>梨</option>
				<option>葡萄</option>
				<option>西瓜</option>
			</optgroup>
			<optgroup label="蔬菜" disabled>
				<option>西兰花</option>
				<option>茄子</option>
				<option>西红柿</option>
			</optgroup>
		</select>
	</div>
</body>
</html>
